/*
 * 职员创建
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2018-06-26 16:29:25
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-staff-create {
        min-height: 600px;
    }

</style>
<template>
	<div class="v-admin-staff-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="80">

					<Form-item
						:label="$t('staff.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('staff.please_enter_name')"
							type="text" />
					</Form-item>

					<Form-item
						:label="$t('staff.password')"
						prop="password">
						<i-input
							v-model="formValidate.password"
							type="text"
							placeholder="请输入密码" />
					</Form-item>

					<Form-item
						:label="$t('staff.phone')"
						prop="phone">
						<i-input
							v-model="formValidate.phone"
							type="text"
							placeholder="请输入电话" />
					</Form-item>

					<Form-item
						:label="$t('staff.gander')"
						prop="sex">
						<RadioGroup v-model="formValidate.sex">
							<Radio label="0">
								<span>男</span>
							</Radio>
							<Radio label="1">
								<span>女</span>
							</Radio>
						</RadioGroup>
					</Form-item>

					<Form-item
						:label="$t('staff.age')"
						prop="age">
						<InputNumber
							:max="100"
							:min="1"
							v-model="formValidate.age"
							placeholder="请输入年龄"/>
					</Form-item>

					<Form-item
						:label="$t('staff.role_name')"
						prop="role_name">
						<Select
							v-model="formValidate.role_name"
							clearable
							placeholder="请选择职员身份"
							transfer>
							<Option
								v-for="( staff , key ) in staffRoles"
								:value="staff.name"
								:key="key">{{ staff.name }}</Option>
						</Select>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">提交</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">重置</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate';

export default {
	name: 'StaffCreate',

	props: {
		staffRoles: {
			type: Object,
			required: true,
		},
	},

	data() {
		return {

			formValidate: {

				name: '',

				password: '',

				phone: '',

				sex: '0',

				age: 1,

				role_name: '',
			}, // 新建视频时的表单

			ruleValidate: {
				name: [
					{ required: true, message: '职员名称不能为空', trigger: 'blur,change' },
				],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur,change' },
				],
				phone: [
					{ required: true, validator: validatePhone, trigger: 'blur,change' },
				],
				sex: [
					{ required: true, message: '性别不能为空', trigger: 'blur,change' },
				],
				age: [
					{
						required: true, type: 'number', message: '年龄不能为空', trigger: 'blur,change',
					},
				],
				role_name: [
					{ message: '职员角色不能为空', trigger: 'blur,change' },
				],
			},
		};
	},
	methods: {

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.dataPost();
				} else {
					this.$Message.error('存在未填写的条目!');
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * post数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = {

				name: this.formValidate.name,

				password: this.formValidate.password,

				phone: this.formValidate.phone,

				sex: this.formValidate.sex,

				age: this.formValidate.age,

				role_name: this.formValidate.role_name,

			};

			this.$emit('post', form_data);
		},

	},
};
</script>
